<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html,
			body,
			.container {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}

			.top {
				width: 100%;
				height: 80px;
				background: url(../img/Snipaste_2020-08-25_16-41-00.png);
			}

			.right {
				position: relative;
				width: 80%;
				height: 80%;
				top: -254px;
				left: 265px;

			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="top">
				<span style="font-size: 30px;position: relative;top:20px;left: 40px;">宿舍管理系统</span>
				<span style="font-size: 15px; position: relative; top:35px; left: 1000px;">当前用户:</span>
			</div>

			<div class="list-group" style="width: 15%; position: relative;top:55px;left: 20px;">
				<a href="index01.html" class="list-group-item active">
					首页
				</a>
				<a href="ssg.html" class="list-group-item">宿舍管理员管理</a>
				<a href="xs.html" class="list-group-item">学生管理</a>
				<a href="ssl.html" class="list-group-item">宿舍楼管理</a>
				<a href="qq.html" class="list-group-item">缺勤记录</a>
				<a href="../login.html" class="list-group-item">退出系统</a>
			</div>
			<div class="right" >
				<h4><strong>宿舍管理员管理</strong></h4>
				<div>
					<input type="text" name="search" />
					<button type="button" onclick="search()" class="btn btn-info ">搜索</button>
					<button type="button" onclick="add()" class="btn btn-success" >添加</button>
				</div>
				<table border="1" class="table table-striped table-bordered table-hover">
					<thead>
						<th>日期</th>
						<th>学号</th>
						<th>姓名</th>
						<th>宿舍楼</th>
						<th>寝室</th>
						<th>备注</th>
						<th>操作</th>
					</thead>
					<tbody>
					</tbody>
					
				</table>
				<script type="text/javascript">
					let qq = [{   
										date: 20,
										number: '柳岩',
										name: '女',
										dorm: '1栋',
										qinshi:102,	
										beizhu: "请假"
									},
									{
										date: 20,
										number: '柳岩',
										name: '女',
										dorm: '1栋',
										qinshi:102,
										beizhu: "请假"
									},
									{
										date: 20,
										number: '柳岩',
										name: '女',
										dorm: '1栋',
										qinshi:102,	
										beizhu: "请假"
									},
									{
										date: 20,
										number: '柳岩',
										name: '女',
										dorm: '1栋',
										qinshi:102,	
										beizhu: "请假"
									},
									{
										date: 20,
										number: '柳岩',
										name: '女',
										dorm: '1栋',
										qinshi:102,
										beizhu: "请假"
									},
								];
				
					let data03 = JSON.parse(localStorage.getItem("data03"));
					if (!data03) {
						data03 = qq;
						localStorage.setItem("data03", JSON.stringify(data03));
					}
					let $tbody = $("table").find("tbody");

					function add() {
						sessionStorage.removeItem("index");
						sessionStorage.removeItem("item");
						location.href = "qqadd.html";
					}
				
				
					function del(index) {
						data03.splice(index, 1);
						localStorage.setItem("data03", JSON.stringify(data03));
						$tbody.empty();
						update();
					}
				
					function search() {
						let search = $("input[name='search']").val();
						$tbody.empty();
						update(search);
					}
				
					function Edit(index) {
						let item = data03[index];
						sessionStorage.setItem("index", index);
						sessionStorage.setItem("item", JSON.stringify(item));
						location.href = "ssgadd.html";
					}
				
					function update(bookName) {
						console.log(data03);
						for (let index in data03) {
							let item = data03[index];
							if (bookName && item.name.toLowerCase().indexOf(bookName.toLowerCase()) === -1) {
								continue;
							}
							let tr =
								`
								<tr>
									<td title="date">${item.date}</td>
									<td title="number">${item.number}</td>
									<td title="name">${item.name}</td>
									<td title="dorm">${item.dorm}</td>
									<td title="qinshi">${item.qinshi}</td>
									<td title="beizhu">${item.beizhu}</td>
									<td>
										<button type="button" onclick="Edit(${index})" class="btn btn-info">编辑</button>
										<button type="button" onclick="del(${index})" class="btn btn-danger">删除</button>
									</td>
								</tr>
							`;
							$tbody.append(tr);
						}
					}
					update();
				</script>
				<div class="btn-group page" style="position: relative;left: 380px;">
				  <button type="button" class="btn btn-default">首页</button>
				  <button type="button" class="btn btn-default">上一页</button>
				  <button type="button" class="btn btn-default">1</button>
				  <button type="button" class="btn btn-default">下一页</button>
				  <button type="button" class="btn btn-default">尾页</button>
				</div>
			</div>
		</div>
	</body>
</html>
